<template>
  <div class="main">
        <p class="main_text">旌龙结算</p>
      <!-- 搜索 -->
      <div class="g-search">
        <!-- 信息区域 -->
        <div class="all_select" style="flex-wrap: wrap">
          <div class="input_valye">
            <span class="demonstration">回收员:</span>
            <el-input v-model="searchValue.recyclerName" style="width: 200px" placeholder="请输入回收员名称" />
          </div>
          <div class="input_valye">
            <span class="demonstration">车牌号:</span>
            <el-input v-model="searchValue.carNo" style="width: 200px" placeholder="车牌号" />
          </div>
          <!-- 店铺名称 -->
          <div class="input_valye">
            <span class="demonstration">结算状态:</span>
            <el-select v-model="searchValue.billStatus" style="width: 200px">
              <el-option label="未结算" value="0" />
              <el-option label="结算中" value="2" />
              <el-option label="已结算" value="1" />
            </el-select>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
    <div class="p20">
      <el-row>
        <el-col :span="18">
          税率设置:根据当前征收对象数额，设置需承担
          <template v-if="!flag">
            {{ taxRate + '\u2030' }}
          </template>
          <template v-else>
            <el-input v-model="taxRate" style="width: 150px">
              <template #append>{{ '\u2030' }}</template>
            </el-input>
          </template>
          的税率<el-icon v-if="!flag" color="#2E5882" size="20" style="top: 5px; left: 10px; cursor: pointer"
            @click="handleEdit">
            <Edit />
          </el-icon>
        </el-col>
        <el-col :span="6" style="text-align: right" v-if="flag">
          <el-button type="primary" @click="handleConfirmTaxRate">确认</el-button>
          <el-button type="primary" @click="handleCancel">取消</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- ############################################## 数据表格 ############################################## -->

    <div class="cyr-flex">
      <el-tabs v-model="activeName" @tab-change="handleActiveNameChange">
        <!-- ********** 全部 ********** -->
        <el-tab-pane v-for="item in aduitStatus" :key="item.value" :name="item.value">
          <template #label>
            <span>{{ item.name }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-table :data="tableData"   ref="table" :show-overflow-tooltip="true" v-adaptive border>
        <!--        <el-table-column type="selection" />-->
        <el-table-column label="回收员" prop="name"></el-table-column>
        <el-table-column label="车型" prop="车辆类型"></el-table-column>
        <el-table-column label="车牌号" prop="号牌号码"></el-table-column>
        <el-table-column label="重量/KG" prop="weight"></el-table-column>
        <el-table-column label="三元(是否缺失)">
          <template #default="props"> </template>
        </el-table-column>
        <el-table-column label="电瓶(是否缺失)">
          <template #default="props">
            <!--            {{formatTime(props.row.updatedAt)}}-->
          </template>
        </el-table-column>
        <el-table-column label="轮胎(是否缺失)"></el-table-column>
        <el-table-column label="铝/钢铁盆" prop="n">
          <template #default="props">
            {{ props.row.invoiceStatus ? '已收到' : '未收到' }}
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="unitPrice"></el-table-column>
        <el-table-column label="总价" prop="price"></el-table-column>
        <el-table-column label="审核状态">
          <template #default="props">
            <el-text type="warning" v-if="props.row.auditStatus == 0">审核中</el-text>
            <el-text type="warning" v-else-if="props.row.auditStatus == 1">未通过</el-text>
            <el-text type="success" v-else-if="props.row.auditStatus == 2">已通过</el-text>
            <el-text type="success" v-else>已通过</el-text>
          </template>
        </el-table-column>
        <el-table-column label="结算状态">
          <template #default="props">
            <el-text type="warning" v-if="props.row.billStatus == 0">未结算</el-text>
            <el-text type="danger" v-else-if="props.row.billStatus == 1">已结算</el-text>
            <el-text type="danger" v-else>结算中</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="activeName === '2' || activeName === ''" :show-overflow-tooltip="false">
          <template #default="props">
            <el-button size="small" link
              v-if="roleList.read && props.row.auditStatus == 2 && props.row.billStatus === 1"
              @click="handleView(props.row)">生成结算单</el-button>
            <el-popconfirm title="你确定要结算吗？" @confirm="SettleSaveBtn(props.row)">
              <template #reference v-if="props.row.auditStatus == 2 && props.row.billStatus <= 0 && roleList.write">
                <el-button size="small" link type="primary">结算</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- ############################################## 分页 ############################################## -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
  </div>
  <DialogPrint v-model="dialogTableVisible" />
</template>
<script setup lang="ts">
import { ref, provide, computed, h } from 'vue';
import { ElMessage } from 'element-plus';
import useAuthorize from '@/hooks/authorize';
import {
  RequestSettleGetlistlimit,
  RequestTexGet,
  RequestTexSet,
  RequestSettleBillSettleWithoutWeb
} from '@/api/path/index';
import DialogPrint from '@/views/plateform/Finance/components/DialogPrint.vue';
import { Edit } from '@element-plus/icons-vue';

let roleList = useAuthorize();
const dialogTableVisible = ref<boolean>(false);
const table = ref();
const flag = ref(false);
const taxRate = ref(0);
const activeName = ref('');
const aduitStatus = ref([
  {
    name: '全部',
    value: ''
  },
  {
    name: '审核中',
    value: '0'
  },
  {
    name: '未通过',
    value: '1'
  },
  {
    name: '已通过',
    value: '2'
  },
])
const currentPage = ref(1);
const pageSize = ref(10);
const searchValue = ref({
  page: 1,
  rows: 10,
  recyclerName: '',
  billStatus: '',
  carNo: '',
  auditStatus: '',
});
const handleActiveNameChange = (val) => {
  searchValue.value.auditStatus = val;
  currentPage.value = 1;
  searchValue.value.page = 1;
  dataInit(searchValue.value);
}
const tableData = ref<any[]>([]);
const total = ref(0);
//初始化数据查询
const dataInit = (value: any) => {
  searchValue.value.page = currentPage.value;
  searchValue.value.rows = pageSize.value;
  RequestSettleGetlistlimit(value).then((res: any) => {
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    page: 1,
    rows: 10,
    recyclerName: '',
    carNo: '',
    billStatus: '',
  };
  activeName.value = '';
  currentPage.value = 1;
  dataInit(searchValue.value);
};
/**
 * 搜索点击事件
 */
const search = () => {
  searchValue.value.page = 1;
  dataInit(searchValue.value);
};

const handleCurrentChange = (val: number) => {
  searchValue.value.page = val;
  dataInit(searchValue.value);
};
const selectionArr = ref([]);
const handleSelectionChange = (select) => {
  selectionArr.value = [];
  selectionArr.value = select;
};
const handleBatchExport = () => {
  if (selectionArr.value.length <= 0) {
    ElMessage({
      type: 'warning',
      message: '请选择',
    });
    return;
  } else if (selectionArr.value.length > 5) {
    ElMessage({
      type: 'warning',
      message: '结算单不能超出5项',
    });
    return;
  }
  dialogTableVisible.value = true;
};
const handleView = (row: any) => {
  table.value.clearSelection();
  selectionArr.value = [];
  selectionArr.value.push(row);
  dialogTableVisible.value = true;
};
const handleEdit = () => {
  flag.value = true;
};
const handleConfirmTaxRate = () => {
  if (taxRate.value == 0 || isNaN(taxRate.value)) {
    ElMessage({
      type: 'warning',
      message: '税率必须为数字且大于0',
    });
    return;
  }
  texSet()
  flag.value = false;
};
const handleCancel = () => {
  texGet()
  flag.value = false;
};
function texGet() {
  RequestTexGet().then((res: any) => {
    taxRate.value = res.resultObj;
  });
}
function texSet() {
  RequestTexSet(taxRate.value).then((res: any) => {
    if (res.code == 0) {
      ElMessage({
        type: 'success',
        message: res.resultObj,
      });
    }
  });
}

const SettleSaveBtn = (row: any) => {
  RequestSettleBillSettleWithoutWeb(row.formId).then((res: any) => {
    if (res.success == true) {
      ElMessage({
        type: 'success',
        message: '提交结算成功',
      });
      dataInit(searchValue.value);
    } else {
      ElMessage({
        type: 'error',
        message: '提交结算失败',
      });
    }
  })
}

texGet()
provide('rowData', selectionArr);
dataInit(searchValue.value);
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    width: 100%;
    background-color: #fff;
  }

  .input_valye {
    margin: 10px 10px 0 0;
  }

  .g-search {
    margin: 0;
  }
}

.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;

      .right {
        flex: 1;

        .el-steps {
          padding: 0 0 20px 0;
          border-bottom: 1px solid #b9b9b9;
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 50%;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 15px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;

        .box1_other {
          background: #fff;
        }
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }

  .fristbox {
    margin-top: 0px;
  }
}
</style>